<template>
    <div class="all">
        <div class="top">
            <el-row :gutter="30">
                <el-col :span="8">
                    <el-form>
                        <el-form-item label="科目">
                            <el-select
                                v-model="subject"
                                placeholder="请选择试卷科目"
                                style="width: 70%;"
                                @change="fetchUnits"
                            >
                                <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <el-form>
                        <el-form-item label="单元号">
                            <el-select v-model="course" placeholder="请选择单元号" style="width: 70%;">
                                <el-option
                                    v-for="item in unitOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <el-form>
                        <el-form-item>
                            <el-button type="primary" @click="getInfo1()">立即查询</el-button>
                            <el-button type="text" @click="add()">新增</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <div class="list-container">
            <div class="list" v-for="(item, index) in pagination.records" :key="index">
                <div
                    class="main"
                    style="text-align: center;"
                >{{ item.main }}</div>
                <div class="use" >
                <el-button @click="edit(item)" type="primary" size="small">编辑</el-button>
                <el-button @click="del(item.id)" type="primary" size="small">删除</el-button>
            </div>
            </div>
           
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[4, 8, 10, 20]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            class="page"
        ></el-pagination>
        <el-dialog
            title="添加知识点"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
        >
            <section class="update">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="科目名称">
                        <el-input v-model="subject" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="课程号">
                        <el-input v-model="course" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="知识点详情">
                        <el-input type="textarea" v-model="main" ></el-input>
                    </el-form-item>
                </el-form>
            </section>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onsubmit1()">确 定</el-button>
                <el-button @click="dialogVisible1 = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="编辑知识点"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose"
        >
            <section class="update">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="科目名称">
                        <el-input v-model="subject" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="课程号" >
                        <el-input v-model="course" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="知识点详情">
                        <el-input type="textarea" v-model="main" ></el-input>
                    </el-form-item>
                </el-form>
            </section>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onsubmit2()">确 定</el-button>
                <el-button @click="dialogVisible2 = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // showUse: false,
            selectedItem: null,
            unitData: {
                his: [
                    { value: "1", label: "第一课" },
                    { value: "2", label: "" },
                    { value: "3", label: "" },
                    { value: "4", label: "" },
                    { value: "5", label: "" },
                    { value: "6", label: "" },
                    { value: "7", label: "" },
                    { value: "8", label: "" },
                    { value: "9", label: "" },
                    { value: "10", label: "" },
                    { value: "11", label: "" },
                    { value: "12", label: "" },
                    { value: "13", label: "" },
                    { value: "14", label: "" },
                    { value: "15", label: "" },
                    { value: "16", label: "" },
                    { value: "17", label: "" },
                    { value: "18", label: "" },
                    { value: "19", label: "" },
                    { value: "20", label: "" },
                    { value: "21", label: "" },
                    { value: "22", label: "" },
                    { value: "23", label: "" },
                    { value: "24", label: "" },
                    { value: "25", label: "" },
                    { value: "26", label: "" },
                    { value: "27", label: "" },
                    { value: "28", label: "" },
                    { value: "29", label: "" },
                    { value: "30", label: "" },
                ],
                geo: [
                    { label: "第A单元", value: "unitA" },
                    { label: "第B单元", value: "unitB" },
                ],
                pol: [
                    { label: "第X单元", value: "unitX" },
                    { label: "第Y单元", value: "unitY" },
                ],
            },
            form: {},
            dialogVisible1: false,
            dialogVisible2: false,
            course: "",
            subject: "",
            typeOptions: [
                { value: "his", label: "历史" },
                { value: "geo", label: "地理" },
                { value: "pol", label: "政治" },
            ],
            unitOptions: [],
            pagination: {
                //分页后的考试信息
                current: 1, //当前页
                total: null, //记录条数
                size: 4, //每页条数
            },
            main: "",
        };
    },
    created() {
        this.getInfo();
    },
    methods: {
        fetchUnits() {
            // 根据当前试卷类型更新单元号选项
            this.unitOptions = this.unitData[this.subject];
            this.course = ""; // 清空已选单元号
        },
        getInfo1() {
            console.log(this.pagination.current, this.subject, this.course);
            //分页查询所有试卷信息
            this.$axios(
                `/api/Zhi/${this.pagination.current}/${this.pagination.size}/${this.subject}/${this.course}`
            )
                .then((res) => {
                    this.pagination = res.data.data;
                    console.log(this.pagination.records);
                })
                .catch((error) => {});
        },
        getInfo() {
            //分页查询所有试卷信息
            this.$axios(
                `/api/Zhi/${this.pagination.current}/${this.pagination.size}`
            )
                .then((res) => {
                    this.pagination = res.data.data;
                })
                .catch((error) => {});
        },
        handleSizeChange(val) {
            this.pagination.size = val;
            this.getInfo();
        },
        //改变当前页码，重新发送请求
        handleCurrentChange(val) {
            this.pagination.current = val;
            this.getInfo();
        },
        add() {
            this.dialogVisible1 = true;
        },
        //编辑知识点
        onsubmit2() {
            this.dialogVisible2 = false;
            this.form.id = this.selectedItem.id
            this.form.subject = this.selectedItem.subject
            this.form.course = this.selectedItem.course
            this.form.main = this.main
            console.log(this.form)
            this.$axios({
                url: "/api/Zhi",
                method: "put",
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        //成功修改提示
                        message: "更新成功",
                        type: "success",
                    });
                }
            });
            this.subject=null;
            this.course=null;
            this.main=null;
        },
        onsubmit1() {
            this.dialogVisible1 = false;
            this.form.subject = this.subject;
            this.form.course = this.course;
            this.form.main = this.main;
            this.form.id =null;
            console.log(this.form)
            this.$axios({
                url: "/api/Zhi",
                method: "post",
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        //成功修改提示
                        message: "更新成功",
                        type: "success",
                    });
                }
            });
            this.subject=null;
            this.course=null;
            this.main=null;
            this.getInfo()
        },
        handleClose(done) {
            //关闭提醒
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        edit(item){
            this.selectedItem = item;
            this.dialogVisible2 = true;
            this.subject = item.subject;
            this.course = item.course;
            this.main = item.main;

        },
        del(id) {
            this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
                confirmButtonText: "确定删除",
                cancelButtonText: "算了,留着",
                type: "danger",
            })
                .then(() => {
                    //确认删除
                    this.$axios({
                        url: `/api/Zhi/${id}`,
                        method: "delete",
                    }).then((res) => {
                        this.getInfo();
                    });
                })
                .catch(() => {});
        },
        // selectItem(item) {
        //     this.selectedItem = item;
        //     this.showUse = true; // 点击后显示 use
        // },
    },
    // watch: {
    //     /**
    //      * 监听试卷类型的变化
    //      */
    //     type(newType) {
    //         if (newType) {
    //             this.fetchUnits(); // 加载对应的单元号
    //         } else {
    //             this.unitOptions = []; // 如果试卷类型为空，清空单元号选项
    //             this.selectedUnit = "";
    //         }
    //     },
    // },
};
</script>

<style scoped>  
.all {
    margin-left: 40px;
}
.list {
    margin: 10px;
    border: 1px solid #ccc; /* 边框 */
    padding: 10px; /* 内边距 */
    background-color: #bad7e9; /* 背景颜色 */
    border-radius: 5px; /* 圆角 */
}

/* zhi 元素的样式 */
.main {
    margin: 10px 0; /* 上下间距 */
    padding: 10px; /* 内边距 */
    text-align: center;
    border: 2px solid #1f83e0; /* 边框 */
    background-color: #fff; /* 背景颜色 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    border-radius: 3px; /* 圆角 */
}

/* use 元素的样式 */
.use {
    margin-top: 15px; /* 与 zhi 的上下间距 */
    text-align: center;
}
.page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .knowledge-page {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.input-section {
    margin-bottom: 20px;
}

.input-section label {
    margin-right: 10px;
}

.input-section input {
    width: 100px;
    padding: 5px;
    margin-right: 10px;
}

.editor-section textarea {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.list-section ul {
    list-style-type: none;
    padding: 0;
}

.list-section li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-section button {
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
} */
</style>